<template>
  <div class="content">
    <div class="elTable">
      <!-- 表格 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="tab in tabs"
          :key="tab.label"
          :label="tab.label"
          :name="tab.label"
        >
          <div class="tabInfo">
            <div class="searchBtn search">
              <SearchForm
                :formObj="formObj"
                :formData="searchForm"
              ></SearchForm>
              <div class="btn">
                <el-button
                  v-if="activeName == '草稿'"
                  type="primary"
                  @click="handleAdd"
                  >调动申请</el-button
                >
              </div>
            </div>
            <!-- 表格主体 -->
            <el-table
              class="tabTable"
              :data="regularData"
              style="width: 100%"
              show-overflow-tooltip
            >
              <!-- 基础信息列 -->
              <el-table-column type="index" label="序号" width="60" />
              <el-table-column prop="name" label="姓名" />
              <el-table-column prop="jobNumber" label="工号" />
              <el-table-column label="性别" width="80">
                <template #default="{ row }">
                  <div>{{ row.sex === 0 ? "男" : "女" }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="educationalBackground" label="学历" />
              <el-table-column prop="profession" label="专业" />
              <el-table-column prop="deptName" label="入职部门" />
              <el-table-column prop="jobName" label="岗位名称" />
              <el-table-column prop="joinTime" label="入职日期" />
              <el-table-column prop="employeeStatus" label="员工状态" />
              <el-table-column prop="createName" label="创建人" />
              <el-table-column prop="createTime" label="创建时间" />

              <!-- 审批结果列 -->
              <el-table-column
                v-if="tip === '审批结束'"
                prop="status"
                label="审批结果"
              />

              <!-- 动态操作列 -->
              <el-table-column label="操作" width="130px" align="center">
                <template #default="{ row }">
                  <div class="operation">
                    <!-- 草稿状态 -->
                    <template v-if="tip === '草稿'">
                      <el-button type="text" @click="handleInfo(row)"
                        >查看</el-button
                      >
                      <el-button type="text" @click="handleEdit(row)"
                        >编辑</el-button
                      >
                      <el-button type="text" @click="handleDelete(row)"
                        >删除</el-button
                      >
                    </template>

                    <!-- 审批中状态 -->
                    <template v-if="tip === '审批中'">
                      <el-button type="text" @click="handleApproveInfo(row)"
                        >查看</el-button
                      >
                      <el-button
                        type="text"
                        @click="handleApprove(row)"
                        v-hasPermi="['system:info:sbumit']"
                        >审批</el-button
                      >
                    </template>

                    <!-- 审批结束状态 -->
                    <template v-if="tip === '审批结束'">
                      <el-button type="text" @click="handleEndInfo(row)"
                        >查看</el-button
                      >
                    </template>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <Pagination
              style="margin-top: 20px"
              :total="pagination.total"
              :page="pagination.page"
              :limit="pagination.limit"
              :pageSizes="pagination.pageSizes"
              @handleSizeChange="sizeChange"
              @handleCurrentChange="currentChange"
            ></Pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import SearchForm from "@/components/searchForm/index.vue";
import TabTable from "@/components/Table/tabTable.vue";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { transferList } from "@/api/transferManagement/index.js";
import { searchDepyList } from "@/api/recruitment/jobApplication/index.js";

import Pagination from "@/components/Pagination/pageination.vue";
const router = useRouter();
// 标签页
const activeName = ref("草稿");
// 查看切换
const tip = ref("草稿");

// 初始状态1草稿 2,201处理 中 1000审批完成
const tipVal = ref([1, 201]);
// 部门
const buIdOptions = reactive([]);

const tabs = reactive([
  {
    label: "草稿",
  },
  {
    label: "审批中",
  },
  {
    label: "审批结束",
  },
]);
const formObj = reactive({
  item: [
    {
      input: true,
      label: "",
      prop: "jobName",
      placeholder: "请输入岗位名称",
      disabled: false,
    },
    {
      select: true,
      label: "",
      prop: "deptId",
      placeholder: "请选择入职部门",
      disabled: false,
      options: buIdOptions,
    },
    {
      input: true,
      label: "",
      prop: "name",
      placeholder: "请输入姓名",
      disabled: false,
    },
  ],
  btn: [
    {
      type: "primary",
      name: "搜索",
      className: "el-button-primary",
      clickFun: () => {
        getList();
      },
    },
    {
      type: "primary",
      name: "重置",
      className: "el-button-primary",
      clickFun: () => {
        resetTabState();
      },
    },
  ],
});

const initialSearchForm = {
  flowKey: "jobtrasfer",
  status: 0,
  pageNum: 1,
  pageSize: 10,
};

const searchForm = reactive({ ...initialSearchForm });
// const operationWidth = computed(() => {
//   switch (tip.value) {
//     case "草稿":
//       return "180px";
//     case "审批中":
//       return "180px";
//     case "审批结束":
//       return "120px";
//     default:
//       return "auto";
//   }
// });
// 草稿
// 公共column
const onboardingColumn = reactive([
  {
    label: "姓名",
    prop: "name",
    dataType: "text",
  },
  {
    label: "工号",
    prop: "jobNumber",
    dataType: "text",
  },
  {
    label: "性别",
    prop: "sex",
    dataType: "slot",
    slotName: "sex",
  },
  {
    label: "学历",
    prop: "educationalBackground",
    dataType: "text",
  },
  {
    label: "专业",
    prop: "profession",
    dataType: "text",
  },
  {
    label: "入职部门",
    prop: "deptName",
    dataType: "text",
  },
  {
    label: "岗位名称",
    prop: "jobName",
    dataType: "text",
  },
  {
    label: "入职日期",
    prop: "joinTime",
    dataType: "text",
  },
  {
    label: "员工状态",
    prop: "employeeStatus",
    dataType: "text",
  },
  {
    label: "创建人",
    prop: "createName",
    dataType: "text",
  },
  {
    label: "创建时间",
    prop: "createTime",
    dataType: "text",
  },
]);
const column = computed(() => {
  if (tip.value == "草稿") {
    return [
      ...onboardingColumn,
      {
        dataType: "option",
        label: "操作",
        width: "120px",
        operation: [
          {
            name: "查看",
            type: "info",
            icon: "el-icon-edit",
            clickFun: (row) => {
              return handleInfo(row);
            },
          },
          {
            name: "编辑",
            type: "primary",
            icon: "el-icon-edit",
            clickFun: (row) => {
              return handleEdit(row);
            },
          },
          {
            name: "删除",
            type: "danger",
            class: "del-button",
            icon: "el-icon-delete",
            clickFun: (row) => {
              return handleDelete(row);
            },
          },
        ],
      },
    ];
  } else if (tip.value == "审批中") {
    return [
      ...onboardingColumn,
      {
        dataType: "option",
        label: "操作",
        width: "100px",
        operation: [
          {
            name: "查看",
            type: "info",
            icon: "el-icon-edit",
            clickFun: (row) => {
              return handleApproveInfo(row);
            },
          },
          {
            name: "审批",
            type: "success",
            icon: "el-icon-edit",
            clickFun: (row) => {
              return handleApprove(row);
            },
          },
        ],
      },
    ];
  } else if (tip.value == "审批结束") {
    return [
      ...onboardingColumn,
      {
        label: "审批结果",
        prop: "status",
        dataType: "text",
      },
      {
        dataType: "option",
        label: "操作",
        width: "60px",
        operation: [
          {
            name: "查看",
            type: "info",
            icon: "el-icon-edit",
            clickFun: (row) => {
              return handleEndInfo(row);
            },
          },
        ],
      },
    ];
  }
});
// 表格数据
const regularData = ref([]);
const pagination = reactive({
  total: 10,
  page: 1,
  limit: 10,
  pageSizes: [10, 20, 30, 50],
});

onMounted(() => {
  getDemandDetailsList();
  getList();
});

// 切换标签页
const handleClick = (tab) => {
  const tipMap = new Map([
    ["草稿", [1, 201]],
    ["审批中", [2]],
    ["审批结束", [1000]],
  ]);

  tip.value = tab.props.name;
  tipVal.value = tipMap.get(tip.value) || tipVal.value;
  // 重置状态
  resetTabState();
};

const getList = () => {
  searchForm.status = tipVal.value;
  // 调用接口
  transferList(searchForm).then((res) => {
    if (res.rows.length > 0) {
      regularData.value = res.rows;
      pagination.total = res.total;
    } else {
      regularData.value = [];
      pagination.total = 0;
    }
  });
};

const getDemandDetailsList = async () => {
  // 搜索部门
  const { data } = await searchDepyList();
  if (data.length > 0) {
    data.map((item) => {
      let label = item.deptName;
      let value = item.deptId;
      buIdOptions.push({
        label,
        value,
      });
    });
  }
};

// 调动申请
const handleAdd = () => {
  router.push({
    name: "addTransfer",
    query: {
      text: "add",
    },
  });
};

// 查看
const handleInfo = (row) => {
  console.log(row, "查看");
  router.push({
    name: "transferView",
    query: {
      id: row.id,
    },
  });
};
// 审批查看
const handleApproveInfo = (row) => {
  console.log(row, "查看");
  router.push({
    name: "transferView",
    query: {
      workFlow: 1,
      id: row.id,
    },
  });
};
// 入职管理 addOnboarding
const handleEdit = (row) => {
  console.log(row, "rowrow");
  router.push({
    name: "addTransfer",
    query: {
      text: "edit",
      id: row.id,
    },
  });
};
// 取消
const handleDelete = (row) => {
  console.log("取消", row);
};
// 审批
const handleApprove = (row) => {
  console.log(row, "审批");
  router.push({
    name: "transferView",
    query: {
      workFlow: 1,
      id: row.id,
      examine: 1,
    },
  });
};
// 审批结束
const handleEndInfo = (row) => {
  router.push({
    name: "transferView",
    query: {
      workFlow: 1,
      id: row.id,
    },
  });
};
const sizeChange = (size) => {
  pagination.limit = size.limit;
  searchForm.pageSize = size.limit;
  getList();
};
const currentChange = (page) => {
  console.log(page, "page-----");
  pagination.page = page.page;
  searchForm.pageNum = page.page;
  getList();
};
// 重置搜索表单、表格数据和分页信息
const resetTabState = () => {
  searchForm.user = initialSearchForm.requireDeptId;
  searchForm.name = initialSearchForm.requireProposerName;
  searchForm.region = "";
  // searchForm.status = 0;
  searchForm.pageSize = initialSearchForm.pageSize;
  searchForm.pageNum = initialSearchForm.pageNum;
  searchForm.jobName = initialSearchForm.jobName;

  searchForm.deptId = initialSearchForm.deptId;
  regularData.value = [];
  pagination.value = {
    total: 0,
    page: 1,
    limit: 10,
    pageSizes: [10, 20, 30, 50],
  };
  getList();
};
</script>

<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>

<!-- /*主表id*/
private Long id;
/*姓名*/
private String name;
/*工号*/
private String jobNumber;
/*性别*/
private Long sex;
/*学历*/
private String educationalBackground;
/*专业*/
private String profession; // 专业
/*入职部门*/
private Long deptId;
private String deptName;
/*岗位名称*/
private String jobName;
private Long jobId;

/*入职日期*/
@JsonFormat(pattern = "yyyy-MM-dd")
private Date joinTime;
/*员工状态*/
private String employeeStatus;
/*创建人*/
private String createName;
private Long createId;
/*创建日期*/
@JsonFormat(pattern = "yyyy-MM-dd")
private Date createTime;
/**/
private String processId; -->
